<template>
	<view>
		<!-- 背景图片/返回更多按钮 -->
		<view class="mycore_background">
			<image :src="xinxi.backgroundUrl" mode="" class="mycore_background_image1"></image>
			<image src="../../../static/fanhuijiantou2.png" mode="" class="mycore_background_image2" @click="backmy"></image>
			<image src="../../../static/gengduo1.png" mode="" class="mycore_background_image3"></image>
		</view>
		<!-- 个人信息 -->
		<view class="mycore_xinxi">
			<image :src="xinxi.avatarUrl" mode="" class="mycore_xinxi_image1"></image>
			<text class="mycore_xinxi_text1">{{xinxi.nickname}}</text>
			<text class="mycore_xinxi_text2">{{xinxi.follows}}<span>关注</span></text>
			<text class="mycore_xinxi_text3">{{xinxi.followeds}}<span>粉丝</span></text>
			<text class="mycore_xinxi_text4">Lv.{{level}}</text>
			<image class="mycore_xinxi_image2" src="../../../static/mycore/tianjia1.png" mode=""></image>
			<text class="mycore_xinxi_text5">点击添加个人简介</text>
		</view>
		<!-- 选项卡/主页，动态 -->
		<view class="topTabs">
			<scroll-view class="uni-swiper-tab">
				<view class="swiper-tab-list" v-for="(item,index) in items" :key="index" :class="{'active':tabIndex==index}" @tap="change(index)">
					{{item.name}}
					<view class="swiper-tab-line">
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="mycore_main" :class="{dis:btnnum == 0}">
			<view class="mycore_main_sc">
			<view class="mycore_main_box1">
				<text class="mycore_box1_text1">你有{{dj}}张唱片，快去展示</text>
				<text class="mycore_box1_text2">唱片收藏架</text>
				<image src="../../../static/mycore/jiantou3.png" mode="" class="mycore_box1_image"></image>
			</view>
			<view class="mycore_main_box2">
				<text class="mycore_box1_text1">展示动态图片让别人了解你</text>
				<text class="mycore_box1_text2">使用相册</text>
				<image src="../../../static/mycore/jiantou3.png" mode="" class="mycore_box1_image"></image>
			</view>
			<view class="mycore_main_box3">
				<text class="mycore_box1_text1">大声说出你的愿望</text>
				<text class="mycore_box1_text2">写愿望清单</text>
				<image src="../../../static/mycore/jiantou3.png" mode="" class="mycore_box1_image"></image>
			</view>
			</view>
			<!-- 基本信息 -->
			<view class="mycore_jbxinxi">
				<view class="mycore_jbxinxi_head">
					<text>基本信息</text>
				</view>
				<view class="mycore_jbxinxi_main">
					<text>村龄：</text>
					<text>4年（2016年11月注册）</text>
				</view>
				<view class="mycore_jbxinxi_main1">
					<text>性别：</text>
					<text>男</text>
				</view>
				<view class="mycore_jbxinxi_main2">
					<text>地区：</text>
					<text>湖北  荆州</text>
				</view>
				<view class="mycore_jbxinxi_main3">
					<text>个人介绍：</text>
					<text>暂无</text>
				</view>
				
			</view>
			
			<!-- 音乐品味 -->
			<view class="mycore_yinyue">
				<view class="mycore_yinyue_text1">
					<text>音乐品味</text>
				</view>
				<view class="mycore_yinyue_rank">
					<view class="mycore_yinyue_rank1">
						<image src="../../../static/mycore/rank.png" mode=""></image>
					</view>
					
						<text class="mycore_yinyue_rank_text1">听歌排行</text>
						<text class="mycore_yinyue_rank_text2">累计听歌{{listenSongs}}首</text>
						
					
				</view>
				<view class="mycore_yinyue_love" v-for="(item,index) in mylove.slice(0,1)" :key="item.id">
					<view class="mycore_yinyue_love1">
						<image src="../../../static/mycore/love.png" mode=""></image>
					</view>			
						<text class="mycore_yinyue_love_text1">我喜欢的音乐</text>
						<text class="mycore_yinyue_love_text2">{{item.trackCount}}首，播放{{item.playCount}}次</text>
				</view>
			</view>
			
			<!-- 创建的歌单 -->
			<view class="mycore_cjgedan">
				<view class="mycore_cjgedan_head">
					<text>创建的歌单</text>
				</view>
				<view class="mycore_cjgedan_list" v-for="(items,index) in gedan.slice(0,6)" v-if="index>=1" :key="items.id">
					<view class="square_show"></view>
					<image :src="items.coverImgUrl" mode="" class="mycore_cjgedan_list_image"></image>
					<text class="mycore_cjgedan_list_text1">{{items.name}}</text>
					<text class="mycore_cjgedan_list_text2">{{items.trackCount}}首,播放{{items.playCount}}次</text>
				</view>
			</view>
			
			<view class="mycore_cjgedan  sc">
				<view class="mycore_cjgedan_head">
					<text>收藏的歌单</text>
				</view>
				<view class="mycore_cjgedan_list" v-for="(items,index) in gedan.slice(6,14)"  :key="items.id">
					<view class="square_show"></view>
					<image :src="items.coverImgUrl" mode="" class="mycore_cjgedan_list_image"></image>
					<text class="mycore_cjgedan_list_text1">{{items.name}}</text>
					<text class="mycore_cjgedan_list_text2">{{items.trackCount}}首,播放{{items.playCount}}次</text>
				</view>
			</view>
		</view>
		<view class="mycore_main1" :class="{dis:btnnum == 1}">
			<text>暂时还没有动态哦</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dj:{},
				xinxi: [],
				level: [],
				listenSongs:[],
				mylove:[],
				gedan:[],
				sHeight: 500,
				btnnum: 0,
				tabIndex: '',
				items: [{
						id: 1,
						name: '主页'
					},
					{
						id: 2,
						name: '动态'
					}


				],
			}
		},
		onShow() {
			this.myuser = uni.getStorageSync('setUser');
			this.getbackground(this.myuser)
		},
		methods: {
			getbackground(myuser) {
				uni.request({
					url: 'http://localhost:3000/user/detail',
					data: {
						uid: myuser
					},
					method: 'GET',
					success: (res) => {
						this.xinxi = res.data.profile
						this.level = res.data.level
						this.listenSongs = res.data.listenSongs
						console.log(res.data.profile)

					}

				})
				uni.request({
					url:'http://localhost:3000/user/subcount',
					method:'GET',
					success: (res) => {
						this.dj = res.data.createDjRadioCount
					}
				})
				uni.request({
					url:'http://localhost:3000/user/playlist',
					data:{
						uid:myuser
					},
					
					method:'GET',
					success: (res) => {
						console.log(res.data.playlist)
						this.mylove = res.data.playlist
						this.gedan = res.data.playlist
					}
				})
			},
			backmy(){
				uni.navigateBack({
					delta:1
				})
			},
			change(e) {
				this.btnnum = e
				this.tabIndex = e
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	// 背景图片/返回更多按钮 
	.mycore_background {
		width: 750rpx;
		height: 650rpx;
		position: relative;
		overflow: hidden;

		.mycore_background_image1 {
			width: 750rpx;
			height: 700rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;

		}

		.mycore_background_image2 {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 60rpx;
			left: 40rpx;
			z-index: 100;
		}

		.mycore_background_image3 {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 50rpx;
			right: 40rpx;
			z-index: 100;
		}
	}

	// 个人信息
	.mycore_xinxi {
		width: 700rpx;
		height: 280rpx;
		margin: 0 auto;
		background: #fff;
		position: relative;
		top: -30rpx;
		left: 0rpx;
		border-radius: 30rpx;
		box-shadow: 0 2px 10px #ccc;
		position: relative;

		.mycore_xinxi_image1 {
			width: 160rpx;
			height: 160rpx;
			border: 2px solid #fff;
			position: absolute;
			top: -80rpx;
			left: 260rpx;
			border-radius: 50%;
		}

		.mycore_xinxi_text1 {
			font-size: 40rpx;
			font-weight: 600;
			letter-spacing: 3px;
			position: absolute;
			top: 100rpx;
			left: 255rpx;
		}

		.mycore_xinxi_text2 {
			width: 100rpx;
			height: 30rpx;
			border-right: 1px solid #e6e6e6;
			position: absolute;
			top: 170rpx;
			left: 180rpx;
			font-size: 10rpx;

			span {
				font-size: 10rpx;
				color: #808080;
				margin-left: 4rpx;
			}
		}

		.mycore_xinxi_text3 {
			width: 100rpx;
			height: 30rpx;
			border-right: 1px solid #e6e6e6;
			position: absolute;
			top: 170rpx;
			left: 320rpx;
			font-size: 10rpx;

			span {
				font-size: 10rpx;
				color: #808080;
				margin-left: 4rpx;
			}
		}

		.mycore_xinxi_text4 {
			position: absolute;
			top: 170rpx;
			left: 460rpx;
			font-size: 10rpx;
		}

		.mycore_xinxi_image2 {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 222rpx;
			left: 200rpx;
		}

		.mycore_xinxi_text5 {
			letter-spacing: 1px;
			color: #cccccc;
			font-size: 10rpx;
			position: absolute;
			top: 220rpx;
			left: 250rpx;
		}
	}

	// 选项卡/主页，动态
	.mycore_main{
		display: none ;
	}
	.mycore_main1{
		display: none ;
	}
	.dis{
		display: block;
	}
	.topTabs {
		width: 700rpx;
		height: 100rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;

	}

	.swiper-tab-list {
		width: 350rpx;
		height: 60rpx;
		color: #696969;
		font-weight: bold;
		float: left;
		font-size: 30rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.uni-swiper-tab .active {

		width: 350rpx;
		height: 60rpx;
		color: #313131;
		font-family: bold;
	}

	.active .swiper-tab-line {
		width: 80rpx;
		margin: auto;
		background-color: #fe3c3c;
		border: 6rpx solid #fe3c3c;
		border-radius: 60rpx;
		margin-top: -10rpx;

	}
	.mycore_main_sc{
		width: 700rpx;
		height: 260rpx;
		margin: 0 auto;
		
		.mycore_main_box1{
			background:#fff;
			width: 215rpx;
			height:260rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			position: relative;
			float: left;
			}
			.mycore_box1_text1{
				width: 180rpx;
				position: absolute;
				top:30rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #6f6f6f;
			}
			.mycore_box1_text2{
				position: absolute;
				top:200rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #f46663;
				font-weight: 600;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top:202rpx;
				left:140rpx;
		    }
		.mycore_main_box2{
			width: 215rpx;
			height:260rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			position: relative;
			background:#fff;
			float: left;
			.mycore_box1_text1{
				width: 160rpx;
				position: absolute;
				top:30rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #6f6f6f;
			}
			.mycore_box1_text2{
				position: absolute;
				top:200rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #fc3b3c;
				font-weight: 600;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top:202rpx;
				left:120rpx;
			}
		}
		.mycore_main_box3{
			width: 215rpx;
			height:260rpx;
			border-radius: 20rpx;
			position: relative;
			background:#fff;
			float: left;
			.mycore_box1_text1{
				width: 160rpx;
				position: absolute;
				top:30rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #6f6f6f;
			}
			.mycore_box1_text2{
				position: absolute;
				top:200rpx;
				left:20rpx;
				font-size: 12rpx;
				color: #fc3b3c;
				font-weight: 600;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top:202rpx;
				left:140rpx;
			}
		}
		
		
    }
	
	.mycore_main1{
		width: 700rpx;
		height: 260rpx;
		margin: 0 auto;
		position: relative;
		text{
			
			position: absolute;
			top:40rpx;
			left: 220rpx;
			color: #868686;
		}
	}
	.mycore_jbxinxi{
		width:680rpx;
		height:360rpx;
		margin:40rpx auto;
		border-radius: 10px;
		background:#fff;
		position: relative;
		.mycore_jbxinxi_head{
			width: 200rpx;
			height:50rpx;
			
			position: absolute;
			top:30rpx;
			left:20rpx;
			font-size: 35rpx;
			font-weight: 600;
		}
		.mycore_jbxinxi_main{
			width:680rpx;
		
			position: absolute;
			top:100rpx;
			left:20rpx;
			font-size: 10rpx;
			color: #808080;
		}
		.mycore_jbxinxi_main1{
			width:680rpx;
			
			position: absolute;
			top:160rpx;
			left:20rpx;
			font-size: 10rpx;
			color: #808080;
		}
		.mycore_jbxinxi_main2{
			width:680rpx;
			
			position: absolute;
			top:220rpx;
			left:20rpx;
			font-size: 10rpx;
			color: #808080;
		}
		.mycore_jbxinxi_main3{
			width:680rpx;
			
			position: absolute;
			top:280rpx;
			left:20rpx;
			font-size: 10rpx;
			color: #808080;
		}
	}
	
	.mycore_yinyue{
		width:680rpx;
		height:360rpx;
		margin:40rpx auto;
		border-radius: 10px;
		background:#fff;
		position: relative;
		.mycore_yinyue_text1{
			width: 200rpx;
			height:50rpx;
			
			position: absolute;
			top:30rpx;
			left:20rpx;
			font-size: 35rpx;
			font-weight: 600;
		}
		.mycore_yinyue_rank{
			width: 680rpx;
			height:100rpx;
			position: absolute;
			top:100rpx;
			left:20rpx;
			.mycore_yinyue_rank1{
				width: 100rpx;
				height: 100rpx;
				background:#fc5252;
				border-radius: 10px;
				opacity: 0.9;
				image{
				width:50rpx;
				height:50rpx;
				position: absolute;
				top:20rpx;
				left:25rpx;
			}
			}
			.mycore_yinyue_rank_text1{
				position: absolute;
				top:10rpx;
				left:120rpx;
				font-weight: 600;
			}
			.mycore_yinyue_rank_text2{
				
				position: absolute;
				top:50rpx;
				left:120rpx;
				font-size: 10rpx;
				color: #818181;
			}
		}
		.mycore_yinyue_love{
			width: 680rpx;
			height:100rpx;
			position: absolute;
			top:220rpx;
			left:20rpx;
			.mycore_yinyue_love1{
				width: 100rpx;
				height: 100rpx;
				background:#fc5252;
				border-radius: 10px;
				opacity: 0.9;
				image{
				width:50rpx;
				height:50rpx;
				position: absolute;
				top:26rpx;
				left:26rpx;
			}
			}
			.mycore_yinyue_love_text1{
				position: absolute;
				top:10rpx;
				left:120rpx;
				font-weight: 600;
			}
			.mycore_yinyue_love_text2{
				
				position: absolute;
				top:50rpx;
				left:120rpx;
				font-size: 10rpx;
				color: #818181;
			}
		}
		}
		
		
		// 创建的歌单/收藏的歌单
		.sc{
			min-height: 1100rpx !important;
		}
		.mycore_cjgedan{
			width: 680rpx;
			min-height:700rpx;
			margin:40rpx auto;
			border-radius: 10px;
			background:#fff;
			position: relative;
			.mycore_cjgedan_head{
				width: 200rpx;
				height:50rpx;
				
				position: absolute;
				top:30rpx;
				left:20rpx;
				font-size: 35rpx;
				font-weight: 600;
			}
			.mycore_cjgedan_list{
				width: 660rpx;
				height:120rpx;
				position: relative;
				top:100rpx;
				left:20rpx;
				.square_show{
					width: 80rpx;
					height:80rpx;
					position: absolute;
					left:10rpx;
					border-radius: 20rpx;
					background-color: #ededed;
					margin-top:-8rpx;
					opacity: 0.8;
				}
				.mycore_cjgedan_list_image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10px;
			}
			.mycore_cjgedan_list_text1{
				width: 480rpx;
				position: absolute;
				top:20rpx;
				left:120rpx;
				font-weight: 600;
				overflow: hidden;
				word-break: break-all;  /* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1; /** 显示的行数 **/
			}
			.mycore_cjgedan_list_text2{
				width: 480rpx;
				position: absolute;
				top:60rpx;
				left:120rpx;
				font-size: 10rpx;
				color: #818181;
				overflow: hidden;
				word-break: break-all;  /* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1; /** 显示的行数 **/
			}
			}
			
		}
</style>
